<template>
  <div class="container">
    <HeadTitle title="支付成功" />

    <div class="yh-layout-box">
      <div class="payStatus mt-30 bg-white">
        <div class="icon">
          <img src="@/assets/images/meal/status-success.png" alt="">
        </div>
        <p class="mt-20 pay-text yh-text-color">
          您的订单已支付成功，我司客服会尽快联系您开通！
        </p>
        <div class="btn-submit mt-30">
          查看我的订单
        </div>
        <div class="pay-main">
          <div class="main-msg fl">
            <p> <span class="msg-key"> 交 易 号 ：</span>  <span class="msg-value">1234545423461561513</span> </p>
            <p> <span class="msg-key">内容服务：</span>  <span class="msg-value">工业品厂家直卖网（基础版）</span> </p>
            <p> <span class="msg-key">服务年限：</span>  <span class="msg-value">1年</span> </p>
            <p> <span class="msg-key">支付方式：</span>  <span class="msg-value">支付宝支付</span> </p>
            <p> <span class="msg-key">支付时间：</span>  <span class="msg-value">2019-01-22 14:25:33</span> </p>
          </div>
          <div class="main-price fr">
            实付款： <span class="filterPrice" v-html="filterPrice('8,800.00')"></span>
          </div>
        </div>
      </div>
    </div>
    <Footbar />
  </div>
</template>
<script>
import HeadTitle from '@/components/Layouts/HeadTitle.vue'
import Footbar from '@/components/Layouts/Footbar.vue'
export default {
  name: 'MealPayStatus',
  components: {
    HeadTitle,
    Footbar,
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.payStatus{
  text-align: center;
  padding: 40px 0;
}
.pay-text{
  font-size: 18px;
  font-weight: 500;
  margin-top: 27px;
}
.pay-main{
  overflow: hidden;
  text-align: left;
  padding: 52px 60px;
  width: 680px;
  margin: 0 auto;
  margin-top: 40px;
  background:rgba(247,247,247,1);
  .main-msg{
    color: #666;
  }
  .main-price{
    margin-top: 60px;
    color: #666666;
  }
}
</style>
